<template>
	<view class="pages">
		<!--
		<image class="bg" :src="getimg('/uploads/dailibg2.png')" mode="widthFix"></image>
		-->
		<view :style="'height:'+head+'px'"></view>
		<view style="height: 88rpx;"></view>
		
		
		<view class="tops">
			<view class="user" v-if="info.u">
				<image class="avatar" :src="getimg(info.u.avatar)"></image>
				<view class="fr">
					<text class="nickname">{{info.u.nickname}}</text>
					<text class="infos" style="margin-left: 20rpx;">{{getsf(info.u.group_id)}}</text>
				</view>
				
			</view>
			
			<view class="lists fr">
				<view class="dan" v-for="d of datas" :key="d.name">
					<text class="val">{{d.val}}</text>
						<text class="name">{{d.name}}</text>
				</view>
			</view>
		</view>
		
		<view class="gongneng fr">
			<view class="gd btn" v-for="d of menu" :key="d.name" @click="openwin(d.path)">
				<image class="icon" :src="d.icon"></image>
				<text class="gdname">{{d.name}}</text>
			</view>
		</view>
		
		<!--数据-->
		<view class="datas">
			<view class="change_left flex">
			<view class="left" 
			:style="'background:'+(index==1?'linear-gradient(to bottom right, #ffcfe5, #b7e5ff)':'#efefef')"
			@click="index = 1"
			>
				<text class="change_t1">团队</text>
			</view>
			
			<view class="right left"
			:style="'background:'+(index==2?'linear-gradient(to bottom right, #ffcfe5, #b7e5ff)':'#efefef')"
			@click="index = 2"
			>
			<text class="change_t1">业绩</text>
			</view>
			</view>

			<view class="kuai" v-if="index == 1 && info.urr">
				<text class="title1">总人数：</text>
				<view class="fr" style="justify-content: space-between;">
					<view class="dank">
						<text class="val1">{{info.urr.all}}</text>
						<text class="info1">总人数</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.urr.jadd}}</text>
						<text class="info1">今日新增</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.urr.zadd}}</text>
						<text class="info1">昨日新增</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.urr.yadd}}</text>
						<text class="info1">本月新增</text>
					</view>
				</view>
				<text class="title1" v-if="t > 1">门店数：</text>
				<view class="fr" style="justify-content: space-between;" v-if="t > 1">
				<view class="dank">
					<text class="val1">{{info.mdarr.all}}</text>
					<text class="info1">总门店</text>
				</view>
				
					<view class="dank">
						<text class="val1">{{info.mdarr.jadd}}</text>
						<text class="info1">今日新增</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.mdarr.zadd}}</text>
						<text class="info1">昨日新增</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.mdarr.yadd}}</text>
						<text class="info1">本月新增</text>
					</view>
				</view>
			</view>
			
			
			<view class="kuai" v-if="index == 2 && t>1">
				<text class="title1">门店销量：</text>
				<view class="fr" style="justify-content: space-between;">
					<view class="dank">
						<text class="val1">{{info.mdsale.all?info.mdsale.all:0}}</text>
						<text class="info1">总金额</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.mdsale.jin?info.mdsale.jin:0}}</text>
						<text class="info1">今日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.mdsale.zuo?info.mdsale.zuo:0}}</text>
						<text class="info1">昨日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.mdsale.yue?info.mdsale.yue:0}}</text>
						<text class="info1">本月销售</text>
					</view>
				</view>
				<text class="title1">竞购销量：</text>
				<view class="fr" style="justify-content: space-between;">
					<view class="dank">
						<text class="val1">{{info.jgsale.all?info.jgsale.all:0}}</text>
						<text class="info1">总金额</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.jgsale.all?info.jgsale.jin:0}}</text>
						<text class="info1">今日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.jgsale.all?info.jgsale.zuo:0}}</text>
						<text class="info1">昨日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.jgsale.all?info.jgsale.yue:0}}</text>
						<text class="info1">本月销售</text>
					</view>
				</view>
				
				<text class="title1">霸王餐销售：</text>
				<view class="fr" style="justify-content: space-between;">
					<view class="dank">
						<text class="val1">{{info.bwsale.all?info.bwsale.all:0}}</text>
						<text class="info1">总金额</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.bwsale.all?info.bwsale.jin:0}}</text>
						<text class="info1">今日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.bwsale.all?info.bwsale.zuo:0}}</text>
						<text class="info1">昨日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.bwsale.all?info.bwsale.yue:0}}</text>
						<text class="info1">本月销售</text>
					</view>
				</view>
				
				<!-- 新增霸王同城销售数据 -->
				<text class="title1">霸王同城销售：</text>
				<view class="fr" style="justify-content: space-between;">
					<view class="dank">
						<text class="val1">{{info.bwtcsale?.all || 0}}</text>
						<text class="info1">总金额</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.bwtcsale?.jin || 0}}</text>
						<text class="info1">今日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.bwtcsale?.zuo || 0}}</text>
						<text class="info1">昨日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.bwtcsale?.yue || 0}}</text>
						<text class="info1">本月销售</text>
					</view>
				</view>
			</view>

		</view>
		
		<!--图表-->
		<view class="tbcon">
			<view class="fr" style="justify-content: space-between;padding: 20rpx;">
				<view class="fr">
					<uni-icons type="fire-filled" size="30" color="red"></uni-icons>
					<text class="title2">销售</text>
				</view>
				<view class="fr">
					<text :class="'danxuan'+(type == 1?' danxuans':'')" @click="cw(1)">日数据</text>
					<text :class="'danxuan'+(type == 2?' danxuans':'')" @click="cw(2)">月数据</text>
					<text :class="'danxuan'+(type == 3?' danxuans':'')" @click="cw(3)">年数据</text>
				</view>
			</view>
			
			<!-- 使用安全包装的图表组件 -->
			<view class="chart-wrapper">
				<!-- 调试信息 -->
				<!-- #ifdef MP -->
				<view v-if="false" style="padding: 10rpx; background: #f0f0f0; margin-bottom: 10rpx; font-size: 24rpx; color: #333;">
					<view>调试信息:</view>
					<view>showChart: {{showChart}}</view>
					<view>chartLoading: {{chartLoading}}</view>
					<view>safeChartData categories长度: {{safeChartData.categories ? safeChartData.categories.length : 0}}</view>
					<view v-for="(series, index) in safeChartData.series" :key="index">
						{{series.name}} 数据长度: {{series.data ? series.data.length : 0}}
					</view>
				</view>
				<!-- #endif -->
				
				<qiun-data-charts 
					v-if="showChart"
					type="line"
					:opts="opts"
					:chartData="safeChartData"
					:errorReload="true"
					:reload="reloadChart"
					@error="handleChartError"
					@complete="handleChartComplete"
				/>
				<!-- 加载状态 -->
				<view v-else-if="chartLoading" class="loading-state">
					<text class="loading-text">数据加载中...</text>
				</view>
				<!-- 空状态提示 -->
				<view v-else class="empty-state">
					<text class="empty-text">暂无数据</text>
				</view>
			</view>
		</view>
		
		<!--排名-->
		<view class="uni-container" style="background: #ffffff;">
			<view class="fr" style="justify-content: space-between;padding: 20rpx;">
				<view class="fr">
					<uni-icons type="vip-filled" size="30" color="red"></uni-icons>
					<text class="title2">月排行榜</text>
				</view>
				<view class="fr">
					<text :class="'danxuan'+(type1 == 1?' danxuans':'')" @click="cw1(1)">门店</text>
					<text :class="'danxuan'+(type1 == 2?' danxuans':'')" @click="cw1(2)">竞购</text>
					<text :class="'danxuan'+(type1 == 3?' danxuans':'')" @click="cw1(3)">霸王餐</text>
					<!-- 新增霸王同城排行榜选项 -->
					<text :class="'danxuan'+(type1 == 4?' danxuans':'')" @click="cw1(4)">霸王同城</text>
				</view>
			</view>
			
			<uni-table ref="table" stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="248rpx" align="center">昵称</uni-th>
					<uni-th width="248rpx" align="center">销售额</uni-th>
					<uni-th width="248rpx" align="center">排名</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.name }}</uni-td>
					<uni-td align="center">{{ item.sale }}</uni-td>
					<uni-td align="center">{{ item.paiming }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		

		<view class="top">
			<view :style="'height:'+head+'px'"></view>
			<view class="topn fr">
				<uni-icons @click="back" type="back" size="30" style="margin-left:10rpx;" color="#ffffff"></uni-icons>
				<text class="title">分销中心</text>
				<view style="width: 35px;"></view>
			</view>
		</view>
		
	</view>
</template>

<script>
import $util from '@/util/util'
	export default {
		data() {
			return {
				head:getApp().globalData.head,
				money:0,
				datas:[],
				menu:[
					{name:'我的推广码',icon:'../static/code.png',path:'/pages/memberinfo/daili/ecode'},
					{name:'补贴中心',icon:'../static/zhuanqian.png',path:'/pages/memberinfo/carlist/carlist?type=3'}
				],
				list:[],
				info:{},

				index:1,//当前是看团队还是销售
				
				t:1,//身份
				bwsale:{},
				jgsale:{},
				mdsale:{},
				// 新增霸王同城销售数据
				bwtcsale: {},
				
				chartData: {},
				safeChartData: {}, // 安全的图表数据
				opts: {
				        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				        padding: [15,15,0,15], // 增加左右padding确保曲线不被裁剪
				        enableScroll: true,
				        legend: {},
				        // #ifdef MP
				        // 小程序环境下的一些特殊配置
				        animation: true,
				        // #endif
				        xAxis: {
				          disableGrid: true,
						  scrollShow: true,
						  itemCount: 5,
						  // #ifdef MP
						  // 小程序特殊配置
						  scrollAlign: "left",
						  // #endif
				        },
				        yAxis: {
				          gridType: "dash",
				          dashLength: 2
				        },
				        extra: {
				          line: {
				            type: "curve",
				            width: 2,
				            activeType: "hollow",
							// #ifdef MP
							// 小程序特殊配置
							animation: "vertical",
							// #endif
				          }
				        }
				      },
				type:1,
				type1:1,
				tableData:[],
				// 图表安全控制
				showChart: true,
				reloadChart: false,
				chartErrorCount: 0,
				chartLoading: false // 添加加载状态
			}
		},
		created() {
			this.getinfo()
			// #ifdef MP
			// 小程序环境延迟加载图表数据，确保页面完全渲染
			this.$nextTick(() => {
				setTimeout(() => {
					this.getServerData()
				}, 500)
			})
			// #endif
			// #ifndef MP
			// H5环境直接加载
			this.getServerData()
			// #endif
			this.cw1()
		},
		mounted() {
			// #ifdef MP
			// 小程序环境页面加载完成后刷新图表
			this.$nextTick(() => {
				setTimeout(() => {
					this.refreshChart()
				}, 1000)
			})
			// #endif
		},
		onReachBottom() {
			// #ifndef APP
			this.loadmore()
			// #endif
		},
		methods: {
			getsf(t){
				if(t == 1){
					return '普通用户';
				}else if(t == 2){
					return '门店';
				}else if(t == 3){
					return '合伙人';
				}else if(t == 4){
					return '子公司';
				}else if(t == 5){
					return '运营中心';
				}else if(t == 6){
					return '总公司';
				}
				return '普通用户';
			},
			openzhuye(uid){
				$util.openwin('/pages/member/myindex/myindex?touserid='+uid)
			},
			openwin(path){
				if(path == '')return
				
				if(path == 'tixian'){
					this.tixian()
					return
				}
				
				$util.openwin(path)
			},
			changes(i){
				this.s = i;
				this.get_list();
			},
			loadmore(){
			if(this.haveMore && !this.loading){
			console.log('开始触发分页')	
			this.get_list(true);
			}	
			},
			get_list(loading = false){
			let that =this;
			that.loading = true;
			if(!loading){
			that.page = 1;
			that.shoplist = []
			that.haveMore = true
			}
			//$util.showProgress();
			$util.ajax({
			url:'Member/dailiList',
			page:that.page,
			},(res,err)=>{
			//$util.hideProgress();
			console.log(res)
			that.loading = false;
			if(res.code == 1 && res.data.length > 0){
			if(that.page == 1){
			that.shoplist = res.data;
			}else{
			that.shoplist = that.shoplist.concat(res.data)
			}	
			}else{
			that.haveMore = false;
			}
			that.page += 1;
			})	
			},
			getimg(path){
				return $util.get_img(path)
			},
			back(){
				uni.navigateBack()
			},
			getinfo(){
				$util.showProgress()
				$util.ajax({
					url:'Member/ajaxdaili'
				},(r,e)=>{
					$util.hideProgress()
					if(r.code == 1){
						this.info = r.data
						this.datas = r.data.datas
						this.money = r.data.money
						this.t = r.data.u.group_id
						// 设置霸王同城销售数据
						this.bwtcsale = r.data.bwtcsale || {}
					}
				})
			},
			cw(t){
				this.type = t
				// #ifdef MP
				// 小程序环境特殊处理
				this.showChart = false
				this.chartLoading = true
				this.$nextTick(() => {
					setTimeout(() => {
						this.getServerData()
					}, 100)
				})
				// #endif
				// #ifndef MP
				// H5环境直接加载
				this.getServerData()
				// #endif
			},
			cw1(t = 1){
				this.type1 = t
				this.paixu()
			},
			paixu(){
			$util.ajax({
				url:'Member/paihang',
				type:this.type1
			},(r)=>{
				if(r.code == 1){
					this.tableData = r.data
				}
			})	
			},
			getServerData() {
				// 设置加载状态
				this.chartLoading = true
				$util.showProgress()
				$util.ajax({
					url:'Member/fenxi',
					type:this.type
				},(r)=>{
					$util.hideProgress()
					// 关闭加载状态
					this.chartLoading = false
					console.log('fenxi接口返回数据:', r)
					
					if(r.code == 1){
						// 检查数据是否存在
						if(!r.data) {
							console.warn('接口返回数据为空')
							// #ifdef MP
							$util.toast('暂无数据')
							// #endif
							this.showChart = false
							return
						}
						
						//遍历数组
						let categories = r.data.h || []
						let data = r.data.t || []
						let data1 = r.data.t1 || []
						let data2 = r.data.t2 || []
						// 新增霸王同城数据
						let data3 = r.data.t3 || []
						
						console.log('原始数据:', {categories, data, data1, data2, data3})
						
						// 确保数据格式正确（小程序环境特别处理）
						// #ifdef MP
						categories = Array.isArray(categories) ? categories : []
						data = Array.isArray(data) ? data : []
						data1 = Array.isArray(data1) ? data1 : []
						data2 = Array.isArray(data2) ? data2 : []
						data3 = Array.isArray(data3) ? data3 : []
						// #endif
						
						// 修复数据长度不一致的问题
						// 根据您提供的数据，categories有16个元素，其他数据系列有15个元素
						// 我们需要确保所有数据系列长度一致
						if (categories.length > 0) {
							console.log('修复前数据长度:', {
								categories: categories.length,
								data: data.length,
								data1: data1.length,
								data2: data2.length,
								data3: data3.length
							})
							
							// 确定统一的长度，以最长的为准
							const maxLength = Math.max(categories.length, data.length, data1.length, data2.length, data3.length)
							
							// 如果categories长度不足，补充空字符串
							while (categories.length < maxLength) {
								categories.push('')
							}
							
							// 如果数据系列长度不足，补充0
							while (data.length < maxLength) {
								data.push(0)
							}
							while (data1.length < maxLength) {
								data1.push(0)
							}
							while (data2.length < maxLength) {
								data2.push(0)
							}
							while (data3.length < maxLength) {
								data3.push(0)
							}
							
							// 如果数据系列长度超过最大长度，截取
							if (categories.length > maxLength) {
								categories = categories.slice(0, maxLength)
							}
							if (data.length > maxLength) {
								data = data.slice(0, maxLength)
							}
							if (data1.length > maxLength) {
								data1 = data1.slice(0, maxLength)
							}
							if (data2.length > maxLength) {
								data2 = data2.slice(0, maxLength)
							}
							if (data3.length > maxLength) {
								data3 = data3.slice(0, maxLength)
							}
							
							console.log('修复后数据长度:', {
								categories: categories.length,
								data: data.length,
								data1: data1.length,
								data2: data2.length,
								data3: data3.length
							})
						}
						
						// 构建图表数据
						let res = {
						      categories: categories,
						      series: [
						        {
						          name: "门店",
						          data: data
						        },
								{
								  name: "竞购",
								  data: data1
								},
								{
								  name: "霸王餐",
								  data: data2
								},
								// 新增霸王同城数据系列
								{
								  name: "霸王同城",
								  data: data3
								},
						      ]
						    }
						
						console.log('构建的图表数据:', res)
						    
						// 安全地设置图表数据
						this.chartData = res
						// 针对小程序环境，使用深拷贝确保数据响应式更新
						// #ifdef MP
						this.safeChartData = JSON.parse(JSON.stringify(res))
						console.log('小程序环境设置safeChartData:', this.safeChartData)
						// #endif
						// #ifndef MP
						this.safeChartData = res
						// #endif
						
						// 检查是否有有效数据
						const hasValidData = res.series.some(series => 
							Array.isArray(series.data) && series.data.length > 0 && 
							series.data.some(item => typeof item === 'number' && !isNaN(item))
						)
						
						console.log('是否有有效数据:', hasValidData)
						
						if (!hasValidData) {
							console.warn('图表数据无效或为空')
							// #ifdef MP
							$util.toast('暂无有效数据')
							// #endif
							this.showChart = false
							return
						}
						
						// 针对小程序环境的特殊处理
						// #ifdef MP
						this.showChart = false
						this.$nextTick(() => {
							this.showChart = true
						})
						// #endif
						
						// #ifndef MP
						// H5环境直接更新数据
						this.resetChart()
						// #endif
					} else {
						// 关闭加载状态
						this.chartLoading = false
						console.error('接口返回错误:', r.msg)
						// #ifdef MP
						$util.toast(r.msg || '数据加载失败')
						// #endif
						this.showChart = false
					}
				})
			},
			// 重置图表状态
			resetChart() {
				// #ifdef MP
				// 小程序环境特殊处理
				this.showChart = false
				this.reloadChart = !this.reloadChart
				this.$nextTick(() => {
					this.showChart = true
				})
				// #endif
				
				// #ifndef MP
				// H5环境直接更新
				this.reloadChart = !this.reloadChart
				// #endif
			},
			// 手动刷新图表
			refreshChart() {
				// #ifdef MP
				console.log('手动刷新图表')
				this.showChart = false
				this.reloadChart = !this.reloadChart
				this.$nextTick(() => {
					this.showChart = true
				})
				// #endif
			},
			// 处理图表错误
			handleChartError(err) {
				console.error('图表组件错误:', err)
				this.chartErrorCount++
				
				// 显示错误信息（仅在小程序环境）
				// #ifdef MP
				if (this.chartErrorCount <= 3) {
					$util.toast('图表渲染出现问题，正在尝试重新加载')
				}
				// #endif
				
				// 如果错误次数过多，暂时隐藏图表
				if (this.chartErrorCount > 3) {
					this.showChart = false
					// #ifdef MP
					$util.toast('图表加载失败，请稍后重试')
					// #endif
					// 5秒后尝试重新显示
					setTimeout(() => {
						this.reloadChart = !this.reloadChart
						this.showChart = true
						this.chartErrorCount = 0
					}, 5000)
				} else {
					// 尝试重新加载
					this.reloadChart = !this.reloadChart
				}
			},
			// 图表加载完成
			handleChartComplete() {
				// 重置错误计数
				this.chartErrorCount = 0
				console.log('图表加载完成')
				// #ifdef MP
				// 小程序环境可以在这里添加特殊处理
				console.log('小程序图表渲染成功')
				// #endif
			}
		}
	}
</script>

<style>
.tops{
	padding: 20rpx;
	background: #F11E1E;
}
.user{
	display: flex;
	align-items: center;
	margin-top: 20rpx;
	flex-direction: column;
}
.avatar{
	width: 120rpx;
	height: 120rpx;
	border-radius: 120rpx;
	margin-bottom: 20rpx;
}

.nickname{
	font-size: 28rpx;
	font-weight: bold;
	color: #ffffff;
}
.lists{
	display: flex;
	justify-content: space-around;
	margin-top:40rpx;
}
.dan{
	display: flex;
	align-items: center;
	flex-direction: column;
}
.val{
	font-size: 28rpx;
	font-weight: bold;
	color:#ffffff;
}
.name{
	font-size: 28rpx;
	color: #efefef;
}
.gongneng{
	background: #ffffff;
	padding: 20rpx;
	margin-top: 10rpx;
	display: flex;
	justify-content: space-between;
}
.gd{
	display: flex;
	width: 345rpx;
	align-items: center;
	flex-direction: column;
}
.icon{
	width: 60rpx;
	height: 60rpx;
	margin-bottom: 10rpx;
}
.gdname{
	font-size: 28rpx;
	color: #585858;
}
.bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 750rpx;
}

.top{
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	background: #F11E1E;
}
.topn{
	display: flex;
	height: 88rpx;
	justify-content: space-between;
}
.title{
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
}


  .change_left{
	  display: flex;
	flex-direction: row;
	align-items: center;
  }
  .left{
  	    background: linear-gradient(to bottom right, #ffb6d7, #8bd6ff);
  	    padding: 5px 20px;
  	    border-radius: 20px 0px 0px 20px;
  }
  .change_t{
  	font-size: 14px;
  	color: #585858;
  }
  .change_t1{
  	font-size: 14px;
  	color: #585858;
	width: 100rpx;
  }
  .right{
  	border-radius: 0px 20px 20px 0px;
  	background: #efefef;
  }

.datas{
	background: #ffffff;
	padding: 20rpx;
	margin-top: 20rpx;
}
.kuai{
	margin-top: 20rpx;
}
.title1{
	font-size: 28rpx;
	color: #ababab;
}
.dank{
	margin-top: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 20rpx;
}
.val1{
	font-size: 30rpx;
	color: #000;
}
.info1{
	font-size: 28rpx;
	color: #353535;
}

.infos{
	font-size: 26rpx;
	color: #ffffff;
	background:linear-gradient(to right, #9cbbe9, #70d4eb);
	padding: 0rpx 10rpx;
	border-radius: 40rpx;
}

.tbcon{
	background: #ffffff;
	margin-top: 20rpx;
}
.title2{
	font-size: 30rpx;
	font-weight: bold;
}
.danxuan{
	font-size: 28rpx;
	color: #585858;
	background: #e8e8e8;
	margin-left: 20rpx;
	padding: 5rpx 20rpx;
	border-radius: 50rpx;
}
.danxuans{
	color: #ffffff;
	background: red;
}

/* 图表包装器样式 */
.chart-wrapper {
	padding: 20rpx;
	background: #ffffff;
	border-radius: 20rpx;
	margin: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	min-height: 400rpx;
	/* 小程序特殊样式处理 */
	/* #ifdef MP */
	position: relative;
	/* #endif */
}

/* 空状态样式 */
.empty-state {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999999;
}

/* 加载状态样式 */
.loading-state {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #666666;
}

</style>
